<template>
    <el-select
        v-on="$listeners"
        :value="currentValName"
        v-bind="$attrs"
        @clear="clearHandle"
        ref="selectTree"
    >
        <el-option :value="valueTitle">
            <el-tree
                :data="treeData"
                :props="props_"
                :node-key="props_.nodeKey"
                :current-node-key="value || ''"
                default-expand-all
                show-checkbox
                id="tree-option"
                ref="tree"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
                :render-content="renderContent"
                check-strictly
                check-on-click-node
            ></el-tree>
        </el-option>
    </el-select>
</template>
<script>
const defaultProps = {
    nodeKey: 'id',
    label: 'label',
    children: 'children'
}

export default {
    name: 'select-tree',
    props: {
        axios: {
            type: String,
            default: ''
        },
        props: {
            type: Object,
            required: false,
            default: () => {}
        },
        value: {
            default: ''
        },
        data: {
            type: Array,
            default: () => []
        },
        params: {
            type: Object,
            required: false,
            default: () => {}
        }
    },
    watch: {
        value: {
            handler(newData) {
                this.$refs.tree.setCheckedKeys(this.value ? [this.value] : [])
                if (!this.newData) {
                    this.currentValName = ''
                }
                console.log('newData', newData)
            }
        }
    },
    computed: {
        props_() {
            return {
                ...defaultProps,
                ...this.props
            }
        },
        treeData() {
            return this.axios ? this.defaultData : this.data
        }
    },
    created() {
        console.log('value', this.value)

        if (this.axios) {
            this.$api[this.axios](this.params).then(data => {
                this.defaultData = data
                console.log(this.defaultData)
            })
        }
    },
    mounted() {
        if (this.value) {
            this.$refs.tree.setCheckedKeys([this.value])
        }
        if (!this.newData) {
            this.currentValName = ''
        }
    },
    data() {
        return {
            valueTitle: '',
            currentValName: '',
            defaultData: []
        }
    },
    methods: {
        handleNodeClick(data, { checkedNodes, checkedKeys }) {
            console.log(data, data[this.props_.label])
            this.currentValName = data[this.props_.label]
            this.$emit('input', data[this.props_.nodeKey])
            this.$emit('change', data)
            this.$refs.selectTree.blur()
        },
        clearHandle() {
            this.currentValName = ''
            this.$emit('input', '')
            this.$emit('change', '')
        },
        renderContent(h, { node, data, store }) {
            // console.log('node', node)
            if (node.key === this.value) {
                this.currentValName = node.label
                console.log(this.currentValName)
            }
            return <span class="custom-tree-node">{node.label}</span>
        }
    }
}
</script>
<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}
.el-select-dropdown__item.selected {
    font-weight: normal;
}
ul li ::v-deep.el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
}
.el-tree-node__label {
    font-weight: normal;
}
.el-tree ::v-deep.is-current .el-tree-node__label {
    color: #409eff;
    font-weight: 700;
}
.el-tree ::v-deep.is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
}
.selectInput {
    padding: 0 5px;
    box-sizing: border-box;
}
.el-tree {
    ::v-deep .el-checkbox {
        display: none;
    }
    ::v-deep.is-checked + .custom-tree-node {
        color: #409eff;
        font-weight: 700;
    }
}
</style>
